<template>
	<view :style="{color: props.color}">
		<text class="font-size-[24rpx]" v-if="props.showUnit">{{ props.unit }}</text>
		<text :style="{fontSize: props.fontSize}" :class="{'font-600': props.bold}">{{ integerStr }}</text>
		<text :style="{fontSize: props.subFontSize}" :class="{'font-600': props.bold}"
			v-if="decimalStr">.{{ decimalStr }}</text>
	</view>
</template>

<script setup>
	const props = defineProps({
		price: {
			type: [String, Number],
			default: '0.0'
		},
		showUnit: {
			type: Boolean,
			default: true
		},
		color: {
			type: String,
			default: '#DD0A0A'
		},
		bold: {
			type: Boolean,
			default: true
		},
		fontSize: {
			type: String,
			default: '36rpx'
		},
		subFontSize: {
			type: String,
			default: '24rpx'
		},
		unit: {
			type: String,
			default: '￥'
		},
		format: {
			type: Boolean,
			default: true
		}
	})
	const formatNumber = (str) => {
		return str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	}

	const integerStr = computed(() => {
		if (props.price == '') {
			return '0'
		} else if (`${props.price}`.includes('.')) {
			return props.format ? formatNumber(`${props.price}`.split('.')[0]) : `${props.price}`.split('.')[0]
		} else {
			return props.format ? formatNumber(props.price) : props.price
		}
	})
	const decimalStr = computed(() => {
		if (props.price == '') {
			return '0'
		} else if (`${props.price}`.includes('.')) {
			return `${props.price}`.split('.')[1]
		} else {
			return ''
		}
	})
</script>

<style lang="scss" scoped>

</style>